<template>
    <div class="box">
        <header>
            <div class="img"><img :src="list.userHead" alt=""></div>
            <div class="right">
                <h2>{{list.initiator}}的{{isDelete == 1?'添加':'删除'}}{{type == 1? '课程':'人员'}}审批</h2>
                <p v-if="list.status == 1 && sponsor != 1">待处理</p>
                <p v-if="list.status == 1 && sponsor == 1">审批中</p>
                <p v-if="list.status == 2" style="color:#2D9DFF;">审批通过</p>
                <p v-if="list.status == 3" style="color:#FF0101;">审批拒绝</p>
            </div>
        </header>
        <nav>
            <div class="body">
                <div class="title">发起人</div>
                <div class="content">{{list.initiator}}</div>
                <div class="title">隶属校区/部门</div>
                <div class="content">{{list.dep}}</div>
               <!-- 课程审批详情 -->
                <div v-if="type == 1" class="lesson">
                    <div class="title">课程名称</div>
                    <div class="content">{{list.courseName}}</div>
                    <div class="title">开通人员</div>
                    <!-- <div class="title">删除人员</div> -->
                    <div class="content">{{list.userNames}}</div>
                </div>

                <div class="title">提交时间</div>
                <div class="content">{{list.submitTime}}</div>
                <!-- 人员审批 -->
                <div v-if="type == 2" class="people">
                    <div class="content" style="font-weight:bold">添加人员信息：</div>
                     <div class="title">姓名</div>
                    <div class="content">{{message.username}}</div>
                     <div class="title">手机号</div>
                    <div class="content">{{message.userPhone}}</div>
                     <div class="title">邮箱</div>
                    <div class="content">{{message.email}}</div>
                     <div class="title">性别</div>
                    <div class="content">{{message.userSex}}</div>
                     <div class="title">职位</div>
                    <div class="content">{{message.job}}</div>
                     <div class="title">部门</div>
                    <div class="content">{{message.userDepartment}}</div>
                </div>
            </div>
            <div v-if="list.status == 1 && sponsor != 1" class="button"><button @click="passTo" style="border-radius: 0.15rem 0 0 0.15rem;background:#2E9EFF">通过</button><button @click="refuse" style="border-radius: 0 0.15rem 0.15rem 0;background:#FF2E2E">拒绝</button></div>
        </nav>

        <van-dialog v-model="show" @confirm="onConfirm" title="审批意见" show-cancel-button>
            <div class="text">
                <textarea name="" id="" v-model="opinion" cols="30" rows="10" maxlength="100" placeholder="请填写审批意见..."></textarea>
                <span :style="{color:opinion.length >= 100 ? 'red':''}">{{opinion.length}} / 100</span>
            </div>
        </van-dialog>

        <van-dialog v-model="refuseShow" @confirm="refConfirm" title="审批意见" show-cancel-button>
            <div class="text">
                <textarea name="" id="" v-model="opinions" cols="30" rows="10" maxlength="100" placeholder="请填写审批意见..."></textarea>
                <span :style="{color:opinions.length >= 100 ? 'red':''}">{{opinions.length}} / 100</span>
            </div>
        </van-dialog>
    </div>
</template>
<script>
export default {
    mounted() {
        this.type = this.$route.query.type;
        this.isDelete = this.$route.query.isDelete;
        this.status = this.$route.query.status;
        this.id = this.$route.query.id;
        this.sponsor = this.$route.query.sponsor;
        if(this.type == 1){
            (async ()=>{
                let {data} = await this.get('/user/coursePersonnelApproveThePresentation',{status:this.status});
                if(!data.length){
                    this.Toast({
                        type:'fail',
                        duration:2000,
                        message:'改审批已被他人审批完成或者不存在！',
                        onClose:()=>{
                            this.$router.back()
                        }
                    })
                }
                this.list = data.filter(item=>item.id == this.id)[0];
                
                console.log(this.list);
            })()
        }else {
            (async ()=>{
                let {data} = await this.get('/user/peoplePersonnelApproveThePresentation',{status:this.status});
                if(!data.length){
                    this.Toast({
                        type:'fail',
                        duration:2000,
                        message:'改审批已被他人审批完成或者不存在！',
                        onClose:()=>{
                            this.$router.back()
                        }
                    })
                }
                this.list = data.filter(item=>item.id == this.id)[0];
                let message = await this.get('/user/userInfo',{userId:this.list.userId})
                this.message = message.data;
            })()
        }
    },
    methods: {
        passTo(){
            this.show = true;
        },
        refuse(){
            this.refuseShow = true;
        },
        onConfirm(){
            if(!this.opinion.length){
                this.Toast('审批提交失败,请输入审批意见');
                return
            }
            // 课程添加通过
            if(this.type == 1 && this.isDelete == 1){
                let obj = {
                    IcrobotUserShenpiId:this.list.id,
                    status:2,
                    userIds:this.list.userIds,
                    courseId:this.list.courseId,
                    remark:this.opinion
                };
                (async ()=>{
                    let data = await this.get('/user/personnelCourseAdditionApprovalApproved',obj);
                    if(data.code == 200){
                        this.Toast({
                            type:'success',
                            duration:1000,
                            message:'课程添加审批成功',
                            onClose:()=>{
                                this.$router.back();
                            }
                        })
                    }
                })()  
            }else if(this.type == 1 && this.isDelete == 2){
                let obj = {
                    IcrobotUserShenpiId:this.list.id,
                    status:2,
                    userIds:this.list.userIds,
                    courseId:this.list.courseId,
                    remark:this.opinion
                };
                (async ()=>{
                    let data = await this.get('/user/personnelCourseDeleteApprovalApproved',obj);
                    if(data.code == 200){
                        this.Toast({
                            type:'success',
                            duration:1000,
                            message:'课程删除审批成功',
                            onClose:()=>{
                                this.$router.back();
                            }
                        })
                    }
                })()  
            }else if(this.type == 2 && this.isDelete == 1){
                let obj = {
                    IcrobotUserShenpiId:this.list.id,
                    status:2,
                    userId:this.list.userId,
                    remark:this.opinion
                };
                (async ()=>{
                    let data = await this.get('/user/personnelApproval',obj);
                    if(data.code == 200){
                        this.Toast({
                            type:'success',
                            duration:1000,
                            message:'人员添加审批成功',
                            onClose:()=>{
                                this.$router.back();
                            }
                        })
                    }
                })() 
            }else if(this.type == 2 && this.isDelete == 2){
                let obj = {
                    IcrobotUserShenpiId:this.list.id,
                    status:2,
                    userId:this.list.userId,
                    remark:this.opinion
                };
                (async ()=>{
                    let data = await this.get('/user/personnelApprovalDelete',obj);
                    if(data.code == 200){
                        this.Toast({
                            type:'success',
                            duration:1000,
                            message:'人员删除审批成功',
                            onClose:()=>{
                                this.$router.back();
                            }
                        })
                    }
                })() 
            }
        },
        refConfirm(){
            if(!this.opinions.length){
                this.Toast('审批提交失败,请输入审批意见');
                return
            }
             // 课程添加拒绝
            if(this.type == 1 && this.isDelete == 1){
                let obj = {
                    IcrobotUserShenpiId:this.list.id,
                    status:3,
                    remark:this.opinions
                };
                (async ()=>{
                    let data = await this.get('/user/juJuePersonnelCourseAdditionApprovalApproved',obj);
                    if(data.code == 200){
                        this.Toast({
                            type:'success',
                            duration:1000,
                            message:'课程添加审批成功',
                            onClose:()=>{
                                this.$router.back();
                            }
                        })
                        
                    }
                })()
            }else if(this.type == 1 && this.isDelete == 2){
                let obj = {
                    IcrobotUserShenpiId:this.list.id,
                    status:3,
                    remark:this.opinions
                };
                (async ()=>{
                    let data = await this.get('/user/juJuePersonnelCourseDeleteApprovalApproved',obj);
                    if(data.code == 200){
                        this.Toast({
                            type:'success',
                            duration:1000,
                            message:'课程删除审批成功',
                            onClose:()=>{
                                this.$router.back();
                            }
                        })
                    }
                })()  
            }else if(this.type == 2 && this.isDelete == 1){
                let obj = {
                    IcrobotUserShenpiId:this.list.id,
                    status:3,
                    userId:this.list.userId,
                    remark:this.opinions
                };
                (async ()=>{
                    let data = await this.get('/user/juJuePersonnelApproval',obj);
                    if(data.code == 200){
                        this.Toast({
                            type:'success',
                            duration:1000,
                            message:'人员添加审批成功',
                            onClose:()=>{
                                this.$router.back();
                            }
                        })
                    }
                })() 
            }else if(this.type == 2 && this.isDelete == 2){
                let obj = {
                    IcrobotUserShenpiId:this.list.id,
                    status:3,
                    remark:this.opinions
                };
                (async ()=>{
                    let data = await this.get('/user/juJuepersonnelApprovalDelete',obj);
                    if(data.code == 200){
                        this.Toast({
                            type:'success',
                            duration:1000,
                            message:'人员删除审批成功',
                            onClose:()=>{
                                this.$router.back();
                            }
                        })
                    }
                })() 
            }
        }
    },
    data() {
        return {
            type:'',
            isDelete:'',
            status:'',
            id:'',
            message:'',
            list:[],
            refuseShow:false,
            show:false,
            opinion:'',
            opinions:'',
            sponsor:''
        }
    },
}
</script>
<style lang="scss" scoped>
    .box{
        height: 100%;
    }
    header{
        display: flex;
        align-items: center;
        padding: 0.2rem;
        .img{
            width: 0.72rem;
            height: 0.72rem;
            border-radius: 50%;
            img{
                width: 100%;
                height: 100%;
                border-radius: 50%;
                vertical-align: top;
            }
        }
        .right{
            margin-left: 0.17rem;
            display: flex;
            justify-content: space-between;
            flex-direction: column;
            h2{
                font-size: 0.3rem;
                font-family: PingFang SC;
                font-weight: bold;
                color: #343434;
            }
            p{
                font-size: 0.24rem;
                font-family: PingFang SC;
                font-weight: 400;
                color: #FA742A;
            }
        }
    }
    nav{
       border: 0.2rem solid #F7F9FA;
       height: 12rem;
       display: flex;
       flex-direction: column;
        border-radius: 0.15rem;
       .body{
           padding: 0 0.2rem 0.2rem;
           box-sizing: border-box;
           background: white;
           flex: 1;
           overflow: scroll;
           .title{
                margin-top: 0.3rem;
                font-size: 0.26rem;
                color: #787878;
           }
           .content{
               margin-top: 0.15rem;
               font-size: 0.28rem;
           }
       }
       button{
           width: 50%;
           height: 0.84rem;
        //    border-radius: 0.15rem 0 0 0.15rem;
           border: none;
        font-size: 0.33rem;
        font-family: PingFang SC;
        font-weight: bold;
        color: #FFFFFF;
       }
    }
    .people{
        margin-top: 0.2rem;
        border-top: 0.01rem solid #eee;
    }
    .text{
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        span{
            position: absolute;
            bottom: 0.1rem;
            right: 0.6rem;
            font-size: 0.16rem;
            color: #787878;
        }
        textarea{
            border-radius: 0.2rem;
            resize: none;
            border-color: #eee;
            margin-top: 0.1rem;
            padding: 0.3rem;
            box-sizing: border-box;
        }
    }
    textarea{
    -webkit-appearance: none;
    }
</style>